<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>地质灾害实时监测网</title>
	<link rel="stylesheet" type="text/css" href="/static/stylesheets/index.css">
	<link rel="stylesheet" type="text/css" href="/static/stylesheets/flexcss.css">
</head>
</head>
<body class="HolyGrail">
	<?$this->load->view("inc/header")?>
	<main class="HolyGrail-body">
		<div class="chart-board"><img src="/static/images/mainmap.jpg" alt=""></div>
		<section id="box" class="HolyGrail-content">
			<div id="login-panel">
				<span class="name">登录</span>
				<ul class="border">
					<li class="before"></li>
					<li class="center">log in</li>
					<li class="after"></li>
				</ul>
				<i class="iconfont icon-user"></i><label for="username">用户名</label>
				<div class="form-control">
					<input type="text">
				</div>
				<i class="iconfont icon-password"></i><label for="password">密码</label>
				<div class="form-control">
					<input type="password">
				</div>
				<section class="panel-bottom">
					<span><input type="checkbox"> 记住密码</span>
					<input type="submit" value="登 录">
				</section>
			</div>
			<div id="monitor-panel">
				<span class="name">数据监测</span>
				<ul class="border">
					<li class="before"></li>
					<li class="center">Data monitoring</li>
					<li class="after"></li>
				</ul>
				<div class="list-block">
					<span>监测数量</span>
					<span>100.2000.00个</span>
				</div>
				<div class="list-block">
					<span>监测时常</span>
					<span>3年210天13小时54秒</span>
				</div>
				<div class="list-block">
					<span>监测点</span>
					<span>125个</span>
				</div>
			</div>
			<div id="province-panel">
				<span class="name">监测省份</span>
				<ul class="border">
					<li class="before"></li>
					<li class="center">provinces</li>
					<li class="after"></li>
				</ul>
				<ul>
					<li>
						<div>
							<a href="#" class="thumb-container">
								<img src="/static/images/beijing.jpg" alt="北京">
							</a>
							<span>北京</span>
						</div>
						<div>
							<a href="#" class="thumb-container">
								<img src="/static/images/jilin.jpg" alt="吉林">
							</a>
							<span>吉林</span>
						</div>
					</li>
					<li>
						<div>
							<a href="#" class="thumb-container">
								<img src="/static/images/henan.jpg" alt="河南">
							</a>
							<span>河南</span>
						</div>
						<div>
							<a href="#" class="thumb-container">
								<img src="/static/images/gansu.jpg" alt="甘肃">
							</a>
							<span>甘肃</span>
						</div>
					</li>
					<li>
						<div>
							<a href="#" class="thumb-container">
								<img src="/static/images/xinjiang.jpg" alt="新疆">
							</a>
							<span>新疆</span>
						</div>
						<div>
							<a href="#" class="thumb-container">
								<img src="/static/images/shanxi.jpg" alt="陕西">
							</a>
							<span>陕西</span>
						</div>
					</li>
				</ul>
			</div>
		</section>
		<div id="foot">
			<span class="name">友情链接</span>
			<ul class="border">
				<li class="before"></li>
				<li class="center">News Dynamic</li>
				<li class="after"></li>
			</ul>
			<div class="foot-container">
				<div class="friend-link"><a href="http://www.chinaexplore.com.cn/" target="_blank">地质勘查协会</a></div>
				<div class="friend-link"><a href="http://www.ceic.ac.cn/" target="_blank">中国地震台网</a></div>
				<div class="friend-link"><a href="http://www.geosociety.org.cn/" target="_blank">中国地质学会</a></div>
				<div class="friend-link"><a href="http://www.cugb.edu.cn/" target="_blank">中国地质大学</a></div>
			</div>
		</div>
	</main>
	<?$this->load->view("inc/footer")?>
	<script src="/static/javascripts/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="/static/javascripts/main.js"></script>
	<script>

	/*var offsetX = $('#login-panel').offset().left;
	$('#foot span').eq(0).offset({top:"currentOffset", left:offsetX});
	$('#foot span').eq(1).offset({top:"currentOffset", left:offsetX+30});*/
	</script>
</body>
</html>
